<template>
	<view class="box">
		<view>
			<u-radio-group size="50" icon-size="40" v-model="value">

			<view class="info_box" v-for="(item,index) in list" :key="index">
				<view class="t_box">
					<view>
						<view class="name">{{item.name}}</view>
						<view class="site">{{item.site}}</view>
						
					</view>
					<view>
						<u-radio  :name="item.shop_id" active-color="#FF7133">
					
						</u-radio>
					</view>
				</view>
				<view class="km site">{{item.km}}</view>
				<view class="flexs">
					<view class="flex" @click="make(item)">
						<u-icon name="phone-fill"></u-icon>
						<view>联系老板</view>
					</view>
					<view class="flex" @click="openMap(item)">
						<u-icon name="map-fill"></u-icon>
						<view>导航到店</view>
					</view>
				</view>
			</view>
				</u-radio-group>
		</view>
		<view style="height: 150rpx;"></view>
         <view class="b_box" :class="[system=='ios'?'pm':'']">
			 <view class="btn" @click="set">确认自提店</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				value:'',
				system:''
			}
		},
		onShow() {
			this.getla();
			this.system=uni.getSystemInfoSync().platform;
		},
		methods: {
			openMap(e) {
				let _ = this;
				uni.openLocation({
					latitude: e.latitude,
					longitude:e.longitude,
					name:e.name,
					address:e.site,
					complete(res) {
						console.log(res)
					}
				})
			},
			make(e){
				uni.makePhoneCall({
					phoneNumber:e.mobile
				})
			},
			set(){
				this.$post(this.$api.shopSet,{id:this.value},res=>{
					uni.navigateBack();
				});
			},
			getla() {
				let _ = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.$get(_.$api.shopList, {
							lng: res.longitude,
							lat: res.latitude
						}, ress => {
							_.list = ress.data.data.markers;
							_.value=ress.data.data.default.shop_id;
						})
					},
					fail(error) {
						console.log(error);
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.pm{
		padding-bottom: 45rpx !important;
	}
	.box {
		box-sizing: border-box;
		padding: 20rpx;
	}

	.info_box {
		background-color: #ffffff;
		box-sizing: border-box;
		padding:20rpx 40rpx;
		border-radius: 25rpx;
		margin-bottom: 20rpx;
	
	}
    .t_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.name {
		font-size: 34rpx;
		font-weight: bold;
		color: black;
	}

	.site {
		color: #6B7280;
		font-size: 27rpx;
		margin: 10rpx 0;
	}

	.km {
		font-size: 26rpx;
		text-align: right;
	}
	.b_box{
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
	}
	.btn{
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
		color: #ffffff;
		background-color:#FF7133;
		border-radius: 50rpx;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.flexs{
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 100rpx 0 100rpx;
		border-top: 1rpx solid #F0F0F0;
		margin: 25rpx 0 0 0;
	}
</style>